<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
<!--   <script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
    <my-component></my-component>
    <!-- 不可用 -->
<!--    <myComponents></myComponents>-->
    <my-components></my-components>
    <my-template></my-template>
</div>
<!--<div id="app1">-->
<!--    {{msg}}-->
<!--    <my-component></my-component>-->
<!--</div>-->
<template id="mytemplate">
    <div>
        <h1>我的 template</h1>
    </div>
</template>
</body>
</html>
<script type="module">
    import {}  from './js/vue.js'
    // 注册全局组件
    //  Vue.component('my-component', {
    //     template: '<div>我是全局组件</div>'
    // });

     // 组件
    const myc = Vue.component('my-component', {
        template: '<div>我是全局组件</div>'
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        components:{
             'my-component':myc,
             'myComponents' :{
                  template: '<div>驼峰命名</div>'
             },
            'my-template':{
                template: '#mytem0plate'
            }
        }
    });

</script>